
import '../App.css';
import React from 'react';
import { GlobalOutlined } from '@ant-design/icons'
import { Layout, Typography, Input, Menu, Button, Dropdown } from 'antd';
const logo = 'https://ftp.bmp.ovh/imgs/2021/06/7995dff8ae6dedb9.png'



class App extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        language: 1
      }
    }
  
    chinafn = (e) => {
      console.log('aaa')
      this.setState({
        language: 1
      }, () => {
        console.log(this.state.language)
      })
    }
  
    englishfn = (e) => {
      console.log('bbb')
      this.setState({
        language: 2
      }, () => {
        console.log(this.state.language)
      })
    }
  
    render() {
      return (
  
  
  
        <div className='App'>
          <div className='app-header'>
            {/* topheader */}
            <div className='top-header'>
              <div className='inner'>
                <Typography.Text>
                  让旅游更幸福
                </Typography.Text >
                <Dropdown.Button
                  style={{ marginLeft: 35 }}
                  overlay={
                    <Menu>
                      <Menu.Item onClick={this.chinafn} key={1}>中文</Menu.Item>
                      <Menu.Item onClick={this.englishfn} key={2}>english</Menu.Item>
                    </Menu>
                  }
                  icon={<GlobalOutlined></GlobalOutlined>}
                >
                  语言
                </Dropdown.Button>
                <Button.Group className='button-group'>
                  <Button>注册</Button>
                  <Button>登录</Button>
                </Button.Group>
              </div>
            </div>
  
  
            <Layout.Header className='main-header'>
              <img src={logo} className='App-logo' />
              <Typography.Title level={3} className='title'>
                环球旅行
              </Typography.Title>
  
              <Input.Search
                placeholder={'请输入目的地 主题 等关键字'}
                className='search-input'
              >
              </Input.Search>
            </Layout.Header>
            <Menu mode={'horizontal'} className='main-menu'>
              <Menu.Item key={1}>旅游首页</Menu.Item>
              <Menu.Item key={2}>周末游</Menu.Item>
              <Menu.Item key={3}>跟团游</Menu.Item>
              <Menu.Item key={4}> 自由行 </Menu.Item>
              <Menu.Item key={5}> 私家团 </Menu.Item>
              <Menu.Item key={6}> 邮轮 </Menu.Item>
              <Menu.Item key={7}> 酒店+景点 </Menu.Item>
              <Menu.Item key={8}> 当地玩乐 </Menu.Item>
              <Menu.Item key={9}> 主题游 </Menu.Item>
              <Menu.Item key={10}> 定制游 </Menu.Item>
              <Menu.Item key={11}> 游学 </Menu.Item>
              <Menu.Item key={12}> 签证 </Menu.Item>
              <Menu.Item key={13}> 企业游 </Menu.Item>
              <Menu.Item key={14}> 高端游 </Menu.Item>
              <Menu.Item key={15}> 爱玩户外 </Menu.Item>
              <Menu.Item key={16}> 保险 </Menu.Item>
            </Menu>
          </div>
  
      
        </div> 
  
      )
  
  
    }
  
  
  
  
  }
  
  
  
  
  
  
  
  
  export default App;
  